<template>
	<s-layout title="转出" :bg-style="{
		color: '#F6F6F6'
	}">
		<view class="tips ss-p-x-20 ss-p-t-20 ss-flex align-baseline">
			<view class="tips-text">转出到</view>
			<text class="ss-m-l-40">钱包余额</text>
		</view>
		<view class="money ss-p-20">
			<view class="money-title">转出金额</view>
			<view class="money-input-box ss-flex ss-m-t-35">
				<view class="money-input-box-left">￥</view>
				<view class="money-input-box-right ss-flex-1 ss-p-b-10">
					<view class="input-box ss-flex align-center">
						<input :disabled="state.type==3" type="number" v-model="state.amount" :placeholder="`可转出到余额${state.data.money}元`"
							placeholder-style="font-size: 30rpx;color: #AFAFAF;" />
						<view v-if="state.type!=3" class="money-all" @click="all">全部提现</view>
					</view>
				</view>
			</view>
			<view class="money-tips ss-flex justify-between align-center ss-m-t-20"
				v-if="state.data.ing_money !== '0.00'">
				<view class="money-tips-left">有{{ state.data.ing_money }}元不可转出到余额</view>
				<view class="money-tips-right" @click="state.show = true">查看原因</view>
			</view>
		</view>
		<view class="confirm-btn" :class="[show ? 'btn-active' : '']" @click="submit">确认转出</view>
		<view class="prompt ss-p-20" v-if="state.type === 1">
			<view class="prompt-title">超引擎计划余额提现规则说明</view>
			<view class="prompt-title ss-m-t-30">
				{{ `1. 代理记账提现
				- 需提供合规发票
				- 收取1.37%增值税`}}
			</view>
			<view class="prompt-title ss-m-t-30">
				{{ `2. 非代理记账提现
				- 需提供合规发票
				- 收取6.8%增值税`}}
			</view>
			<view class="prompt-title ss-m-t-30">注：具体费率以平台最新政策为准，发票需符合税务规范要求。</view>
		</view>
		<view class="prompt ss-p-20" v-if="state.type === 2">
			<view class="prompt-title">提现说明</view>
			<view class="prompt-title ss-m-t-30">
				{{ `1. 提现每次收取6.8%增值税+0.6%手续费（综合费率7.4%` }}
			</view>
			<view class="prompt-title ss-m-t-30">
				{{ `2. 具体费率以平台最新政策为准，提现到账时间关注银行入账通知` }}
			</view>
			<!-- <view class="prompt-title ss-m-t-30">注：具体费率以平台最新政策为准，发票需符合税务规范要求。</view> -->
		</view>
		<view class="hint" v-if="state.type === 0">鲸囍商户余额提现收取0.4%手续费</view>
		<su-popup :show="state.show" type="center" round="0" :isMaskClick="true" backgroundColor="transparent"
			@close="close">
			<view class="tips-message ss-flex flex-column justify-between align-center ss-p-t-30 ss-p-b-40">
				<view>
					<view class="tips-message-title">温馨提示</view>
					<view class="tips-message-content ss-p-x-30 ss-m-t-30">该部分金额还未进行结算分账，需等待结算分账后转出到余额后提现</view>
				</view>
				<view class="tips-message-btn" @click="close">我知道了</view>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
import {
	computed,
	reactive
} from 'vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import sheep from '@/sheep';

const show = computed(() => {
	if (state.amount !== '' && state.amount !== '0.00') {
		return true
	}
	return false
})

const state = reactive({
	data: {
		total_money: '0.00',
		ing_money: '0.00',
		money: '0.00'
	},
	amount: '',
	type: null,
	show: false,
	
})

onLoad((options) => {
	if (options) {

		state.type = Number(options.type)
		if (state.type === 1) {
			getStoreData()
			// getStoreRate()
		}
		else if(state.type === 2){
			getStoreMoney()
		}else if(state.type === 3){//本地生活提现
			// 可提现金额为
			console.log(options.money)
			state.amount = options.money
			console.log('state.amount',state.amount)
		}
	}
})

const submit = async () => {
	if (!show.value) {
		return
	}
	if (Number(state.amount) === NaN) {
		return sheep.$helper.toast('请输入正确金额');
	}
	uni.showModal({
		title: '提示',
		content: '请确认是否转入余额?',
		async success(res) {
			if (res.confirm) {
				if (state.type == 2) {
					const {error,data} =await sheep.$api.pay.getSurpriseShopWithdraw({
						amount: state.amount
					})
					if (error === 0) {
						state.amount = ''
						getStoreMoney()
					}
				}else if (state.type == 3){
					const {error,data} =await sheep.$api.merchant.tuangou_income_get({
						amount: state.amount
					})
					if (error === 0) {
						state.amount = ''
					}
				}
				else {
					const {
						error,
						data
					} = await sheep.$api.pay.withdraw2({
						amount: state.amount
					})

					if (error === 0) {
						state.amount = ''
						getStoreData()
					}
				}
			}
		}
	});

}

const close = () => {
	state.show = false
}

const all = () => {
	state.amount = state.data.money
}

const getStoreRate = async () => {
	const {
		error,
		data
	} = await sheep.$api.pay.getStoreRate()

	if (error === 0) {
		console.log(data)
	}
}

const getStoreData = async () => {
	const {
		error,
		data
	} = await sheep.$api.pay.getStoreMoney()

	if (error === 0) {
		state.data.total_money = data.total_money
		state.data.ing_money = data.ing_money
		state.data.money = data.money
	}
}
const getStoreMoney= async () => {
	const {
		error,
		data
	} = await sheep.$api.pay.getSurpriseShop()

	if (error === 0) {
		state.data.total_money = data.total_money
		state.data.ing_money = data.ing_money
		state.data.money = data.money
	}
}
</script>

<style scoped lang="scss">
view {
	box-sizing: border-box;
}

.tips {
	.tips-text {
		font-size: 30rpx;
		font-weight: normal;
		color: #1E1E1E;
	}

	text {
		font-size: 32rpx;
		font-weight: 500;
		color: #1E1E1E;
	}
}

.money {
	width: 710rpx;
	height: 288rpx;
	border-radius: 20rpx;
	background: #FFFFFF;
	margin: 30rpx auto 0;

	.money-title {
		font-size: 30rpx;
		font-weight: normal;
		color: #1E1E1E;
	}

	.money-input-box-left {
		height: 104rpx;
		line-height: 104rpx;
		font-size: 72rpx;
		font-weight: 500;
		line-height: normal;
		color: #1E1E1E;
		margin-right: 25rpx;
	}

	.money-input-box-right {
		height: 104rpx;


		.input-box {
			width: 100%;
			height: 100%;
			border-bottom: 1px solid #D8D8D8;

			input {
				flex: 1;
				height: 100%;
				line-height: 100%;
				margin-right: 20rpx;
				font-size: 30rpx;
				font-weight: normal;
			}

			.money-all {
				font-size: 28rpx;
				font-weight: normal;
				color: #4E31EF;
			}
		}
	}

	.money-tips {
		font-size: 28rpx;
		font-weight: normal;

		.money-tips-left {
			color: #1E1E1E;
		}

		.money-tips-right {
			color: #4E31EF;
		}
	}
}

.confirm-btn {
	width: 710rpx;
	height: 104rpx;
	border-radius: 100rpx;
	background: #E2E2E2;
	font-size: 32rpx;
	font-weight: 500;
	color: #9B9B9B;
	line-height: 104rpx;
	text-align: center;
	margin: 30rpx auto 0;
}

.prompt {
	width: 710rpx;
	border-radius: 20rpx;
	background: #FFFFFF;
	margin: 60rpx auto 0;

	.prompt-title {
		font-size: 28rpx;
		font-weight: normal;
		color: #B0B0B0;
		white-space: pre-line;
	}
}

.hint {
	width: 100%;
	font-size: 30rpx;
	font-weight: normal;
	text-align: center;
	color: #B0B0B0;
	margin: 30rpx auto 0;
}

.tips-message {
	width: 651rpx;
	border-radius: 20rpx;
	background: linear-gradient(180deg, #D4E1FF 0%, #FFFFFF 41%);

	.tips-message-title {
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		color: #171717;
		text-align: center;
	}

	.tips-message-content {
		width: 100%;
		font-size: 30rpx;
		font-weight: normal;
		color: #171717;
	}

	.tips-message-btn {
		width: 480rpx;
		height: 90rpx;
		border-radius: 100rpx;
		background: #426DFA;
		font-size: 30rpx;
		font-weight: bold;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		margin: 60rpx auto 0;
	}
}

.btn-active {
	color: #FFFFFF !important;
	background-color: #4E31EF !important;
}
</style>